<template>
    <div class="departmentList">
        <!-- 筛选bar -->
        <div class="filter-bar">
            <el-row :gutter="10">
                <el-col :span="4">
                    <el-input placeholder="科室名称" v-model="departName" class="input-with-select"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input placeholder="科室编码" v-model="departCode" class="input-with-select"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="handleKeywordFilter">搜索</el-button>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="set">添加科室</el-button>
                </el-col>
            </el-row>
        </div>
        <!-- 表格 -->
        <div class="table">
            <el-table :data="tableData" height="438" v-loading="loading" stripe>
                <el-table-column label="编号" type="index" :index="indexMethod">
                </el-table-column>
                <el-table-column label="科室名称" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <span>{{ scope.row.d_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="科室编码">
                    <template slot-scope="scope">
                        <span>{{ scope.row.d_id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="科室权重">
                    <template slot-scope="scope">
                        <span>{{ scope.row.d_weight }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="set(scope.row)">编辑详情</el-button>
                        <el-button type="text" @click="deleteDepart(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="page">
            <el-pagination @current-change="getDepartmentListByPage" :current-page.sync="pageIndex"
                           :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">>
            </el-pagination>
        </div>

        <div class="popup">
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="30%">
                <span>是否确定放弃本次操作？</span>
                <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">我再想想</el-button>
        <el-button type="primary" @click="deleteTrue">确定删除</el-button>
        </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import {departmentListGet, departmentDelete} from "../../api/department";
    import {doctorListGet} from "../../api/doctor";

    export default {
        name: "list",
        data() {
            return {
                loading: false,
                departName: "",
                departCode: "",
                tableData: [],
                pageIndex: 1, //默认显示第一页
                pageSize: 6, //每页显示
                total: 0,
                dialogVisible: false,
                deleteId: ''
            }
        },

        created() {
            this.init();
        },

        mounted() {

        },

        methods: {
            init() {
                this.getList();
            },
            async getList() {
                try {
                    let res = await departmentListGet({
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize,
                        departName: this.departName,
                        departCode: this.departCode,
                        d_hospital: sessionStorage.getItem('hospitalId')
                    });
                    console.log(res, '科室信息');
                    this.tableData = res.list;
                    this.total = res.total;
                } catch (e) {
                    console.error(e);
                }
            },
            handleKeywordFilter() {
                this.getList();
            },
            indexMethod(index) {
                return index + (this.pageIndex - 1) * this.pageSize + 1;
            },
            getDepartmentListByPage() {
                this.getList();
            },
            set(row) {
                if (row.d_id) {
                    this.$router.push({
                        path: "/departmentManage/update",
                        query: {
                            id: row.d_id
                        }
                    });
                } else {
                    this.$router.push('/departmentManage/add');
                }
            },
            async deleteDepart(row) {
                let res = await doctorListGet({
                    pageIndex: 1,
                    pageSize: 10000,
                    department:row.d_name,
                    doc_hospital: sessionStorage.getItem('hospitalId')
                });
                if(res.list.length == 0){
                    this.dialogVisible = true;
                    this.deleteId = id;
                }else{
                    this.$message.error('科室下有医生无法删除！');
                }
            },
            async deleteTrue() {
                this.dialogVisible = false;
                let res = await departmentDelete({
                    d_id: this.deleteId,
                    d_hospital: sessionStorage.getItem('hospitalId')
                })
                if (res) {
                    this.$message.success(res.msg);
                    this.pageIndex = 1;
                    this.getList();
                }
            }
        },
    }
</script>

<style lang='scss'>
    .departmentList {
        height: 100%;
        position: relative;
        background: #fff;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        margin: 0 20px 0 20px;

        .filter-bar {
            width: 100%;
            margin-bottom: 10px;

            .el-row {
                .el-col {
                    > div {
                        width: 100%;
                    }
                }

                .el-col-5 {
                    max-width: 180px;
                }

                .el-col-9 {
                    max-width: 440px;
                }
            }
        }

        .table {
            margin-top: 20px;
            height: auto;

            .el-table {
                width: 100%;
                height: 100%;
                margin-top: 10px;
                font-size: 14px;
                /*min-height: calc(100% - 88px);*/
            }
        }

        .page {
            margin-top: 20px;

            .el-pagination {
                text-align: center;
            }
        }
    }
</style>